<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 登陆表单区 -->
      <el-form :model="loginForm" :rules="rules"  ref="ruleForm" label-width="0" class="login_form">
          <!-- 用户名 -->
        <el-form-item  prop="username">
          <el-input v-model="loginForm.username" prefix-icon="el-icon-user" class="btn"></el-input>
        </el-form-item>
          <!-- 密码 -->
        <el-form-item prop="password">
          <el-input type="password" v-model="loginForm.password" prefix-icon="el-icon-lock" class="btn"></el-input>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item class="btns">
          <el-button type="primary" @click="Handlogin">登陆</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>

      </el-form>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, ref } from 'vue'
import { useRouter } from 'vue-router';
import { login } from '../../api/login.js'
import {ElMessage} from 'element-plus'
export default defineComponent(
  {
    setup () {
      const router = useRouter();
      const loginForm = reactive({
        username: 'admin',
        password: '123456'

      })
      // 定义ref动态数据
      const ruleForm = ref(null)
      // 定义校验规则
      const rules = {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ]
      }
      // 登陆按钮
      function Handlogin () {
        ruleForm.value.validate(async (valid) => {
          if (!valid) return
          const res = await login(loginForm)
          if(res.meta.status !==200) return ElMessage.error(res.meta.msg)
          ElMessage.success(res.meta.msg)
          window.sessionStorage.setItem('token',res.data.token)
          router.push("/home");
        })
      }
      // 重置按钮
      function resetLoginForm () {
        // 重置表单方法
        ruleForm.value.resetFields()
        ElMessage.success('重置成功')
      }

      return {
        loginForm,
        ruleForm,
        Handlogin,
        resetLoginForm,
        rules
      }
    }
  }
)
</script>
<style lang="scss" scoped>
.login_container {
  background: url('../../assets/img/login.jpg');
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  .login_box {
    position: relative;
    width: 450px;
    height: 200px;
    background-color: rgba(0, 0, 0, 0.5);
    // opacity: 0.5;
    border-radius: 5px;
    // cursor: pointer;
    transition: 0.5s;
    padding: 20px;
    .btns{
        text-align: center;
    }
  }
  .login_box:hover {
    box-shadow: 4px 3px 68px #757575;
    height: 60%;
  }
   .login_box:hover .login_form{
       margin-top: 250px;
   }
}

.login_form{
    margin-top: 30px;
    transition: 0.5s;
}
</style>
